
<template>
  {{ isLock }}
  <div  v-if="isOne">

    <button long v-if="isLock" @click="doLock(false)" icon="../../../assets/add.png" >
      <img src="@/assets/add.png" alt="Button Icon">

    </button>
    <button long v-else @click="doLock(true)" icon="../../../assets/AI_clean.png" >
      <img src="@/assets/AI_clean.png" alt="Button Icon">
    </button>
  </div>
</template>

<script setup name="Lock" lang="ts">
import useSelect from '@/tool/select';
import { onBeforeUnmount, onMounted } from 'vue';

const { canvasEditor, isOne } = useSelect();
const isLock = ref(true);
const doLock = (isLock:boolean) => {    
  isLock ? canvasEditor.lock() : canvasEditor.unLock();
};

const handleSelected = (items:any) => {
  isLock.value = items[0].lockMovementX;
};

onMounted(() => {
  canvasEditor.on('selectOne', handleSelected);
});

onBeforeUnmount(() => {
  canvasEditor.off('selectOne', handleSelected);
});
</script>

<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
